<template>
  <el-row>
    <el-col :span="0.1" class="goalselect">
      <div class="grid-content ep-bg-purple" />
      <el-text class="mx-1" size="large">学院</el-text>
    </el-col>
    <el-col :span="5" class="goalselect">
      <div class="grid-content ep-bg-purple" />
      <el-select v-model="selectedValue1" clearable placeholder="请选择学院">
        <el-option
          v-for="option in optionsWithChildren"
          :key="option.value"
          :label="option.label"
          :value="option.value"
        />
      </el-select>
    </el-col>
    <el-col :span="0.1" class="goalselect">
      <div class="grid-content ep-bg-purple" />
      <el-text class="mx-1" size="large">专业</el-text>
    </el-col>
    <el-col :span="5" class="goalselect">
      <div class="grid-content ep-bg-purple" />
      <el-select v-model="selectedValue2" clearable placeholder="请选择专业">
        <el-option
          v-for="option in computedOptions2"
          :key="option.value"
          :label="option.label"
          :value="option.value"
          :disabled="option.disabled"
        />
      </el-select>
    </el-col>
    <el-col :span="1" class="goalselect">
      <div class="grid-content ep-bg-purple" />
      <el-button :icon="Search" type="success" round>查询</el-button>
    </el-col>
  </el-row>
</template>


<script setup>
import {
  Search,
} from '@element-plus/icons-vue'
import { ref, computed, watch, onMounted } from 'vue'
const options = [
  {
    value: 'Option1',
    children: [
      { value: 'Option1-A1', label: 'A1' },
      { value: 'Option1-A2', label: 'A2' },
      { value: 'Option1-A3', label: 'A3' }
    ]
  },
  {
    value: 'Option2',
    children: [
      { value: 'Option2-B1', label: 'B1' },
      { value: 'Option2-B2', label: 'B2' },
      { value: 'Option2-B3', label: 'B3' }
    ]
  },
  {
    value: 'Option3',
    children: [
      { value: 'Option3-C1', label: 'C1' },
      { value: 'Option3-C2', label: 'C2' },
      { value: 'Option3-C3', label: 'C3' }
    ]
  },
  {
    value: 'Option4',
    children: [
      { value: 'Option4-D1', label: 'D1' },
      { value: 'Option4-D2', label: 'D2' },
      { value: 'Option4-D3', label: 'D3' }
    ]
  },
  {
    value: 'Option5',
    children: [
      { value: 'Option5-E1', label: 'E1' },
      { value: 'Option5-E2', label: 'E2' },
      { value: 'Option5-E3', label: 'E3' }
    ]
  },
];
const selectedValue1 = ref('');
const optionsWithChildren = ref(options.map((option) => ({
  ...option,
  children: option.children.map((child) => ({ ...child, disabled: true }))
})));

const selectedValue2 = ref('');
const computedOptions2 = computed(() => {
  const currentOption = optionsWithChildren.value.find((option) => option.value === selectedValue1.value);
  return (currentOption && currentOption.children) || [];
});

onMounted(() => {
  watch(selectedValue1, (value) => {
    const currentOption = optionsWithChildren.value.find((option) => option.value === value);
    if (currentOption) {
      const children = currentOption.children;
      optionsWithChildren.value.forEach((option) => {
        option.children.forEach((child) => {
          child.disabled = !children.some((c) => c.value === child.value);
        });
      });
    }
    selectedValue2.value = '请选择专业';
  });
});
</script>

<style>
.goalselect {
  display: flex; 
  align-items: center;
  margin-right: 10px; /* 调整两个选择器之间的间距 */
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>